<template>
  <div class="p-4 rounded-lg">
    <emptyView des="暂无记录" v-if="list.length === 0 && !cp_loading" />
    <van-pull-refresh
      v-else
      class="h-full"
      v-model="cp_refreshing"
      @refresh="
        () => {
          refreshTimes++;
          onRefresh();
        }
      "
    >
      <van-list
        v-model:loading="cp_loading"
        :finished="cp_finished"
        finished-text="没有更多了"
        @load="loadMoreData"
      >
        <template v-for="(item, index) in list" :key="index">
          <van-swipe-cell>
            <visitorListRow
              :item="item"
              class="mb-4"
              :isTeam="myTeam"
              @click="onItemClick(item)"
            />
            <template #right>
              <div
                class="bg-[#FF4D4F] w-[60px] h-full flex justify-center items-center rounded-r-lg"
                @click="onDelete(item)"
                v-if="!myTeam"
              >
                <p class="text-white">删除</p>
              </div>
            </template>

            <template #left>
              <div
                class="bg-[#2eb421] w-[60px] h-full flex justify-center items-center rounded-l-lg"
                @click="onFix(item)"
                v-if="enableFix(item)"
              >
                <p class="text-white">修复</p>
              </div>
            </template>
          </van-swipe-cell>
        </template>
      </van-list>
      <van-back-top />
    </van-pull-refresh>

    <van-popup round v-model:show="showBindCustomerDialog" position="bottom">
      <visitBindCustomer
        :conferenceId="currentConferenceId"
        @onConfirm="onHandleBindCustomer"
      />
    </van-popup>

    <van-dialog
      v-model:show="showMsgDialog"
      confirm-button-text="我知道了"
      confirmButtonColor="#436BFF"
    >
      <div class="p-6 text-[#262626] text-[16px]">
        <h5 class="mb-3">录制时长过短导致未生成录制文件，为确保录制质量,建议：</h5>
        <ul>
          1. 录音设备靠近声源，确保收音清晰
        </ul>
        <ul>
          2. 录制时避免误触界面，防止意外结束
        </ul>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { defineProps, computed, defineEmits, ref } from "vue";
import visitorListRow from "./visitorListRow.vue";
import emptyView from "@/components/emptyView.vue";
import visitBindCustomer from "./visitBindCustomer.vue";
import { showToast, showConfirmDialog, showLoadingToast, showDialog } from "vant";
import { deleteVisitRecordAPI } from "@/services/myXmate";
import { ElMessageBox } from "element-plus";
import "vant/es/dialog/style"; // 引入 Dialog 样式
import { fixConferenceAPI } from "@/services/myXmate";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  refreshing: {
    type: Boolean,
    default: false,
  },
  finished: {
    type: Boolean,
    default: false,
  },

  loadMoreData: {
    type: Function,
    default: () => {},
  },
  myTeam: {
    type: Boolean,
  },
  onRefresh: {
    type: Function,
    default: () => {},
  },
});

const refreshTimes = ref(0);

const emits = defineEmits(["update:loading", "update:finished", "update:refreshing"]);

const showBindCustomerDialog = ref(false);

const currentConferenceId = ref("");

const showMsgDialog = ref(false);
function onItemClick(item) {
  if (item.customizeReportStatus === 7) {
    showToast(item.customizeReportFailReason);
    return;
  }

  if (item.customizeReportStatus === 4) {
    if (!item.recordingPaths) {
      // 根据产品需求，展示特定UI
      showMsgDialog.value = true;
      return;
    }
  }

  if (!item.recognitionPath) {
    showToast(item.customizeReportFailReason || "录制文件正在生成中...");
    return;
  }

  currentConferenceId.value = item.conferenceId.split(",")[0];

  router.push({
    path: `/record/${currentConferenceId.value}`,
  });
}

async function onDelete(item) {
  await showConfirmDialog({
    title: "确认删除",
    message: "确定要删除该沟通记录吗？",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    // 可以添加一些自定义样式
    className: "my-custom-dialog",
    confirmButtonColor: "#ee0a24", // 确认按钮的颜色
  });

  console.log("onDelete: ", item);
  showLoadingToast("删除中...");
  await deleteVisitRecordAPI(item.conferenceId);
  showToast("删除成功");
  props.onRefresh();
}

function enableFix(item) {
  if (refreshTimes.value < 3) {
    return false;
  }
  if (props.myTeam) return false;
  // 生成中，禁止修复
  if (!item.recognitionPath) return false;
  const { reportStatus } = item;
  if (reportStatus == "文件处理中") return false;
  return true;
}

function onFix(item) {
  console.log("onFix: ", item);
  const { conferenceId } = item;
  showConfirmDialog({
    title: "提示",
    message: "确定要修复该沟通记录吗?",
  })
    .then(() => {
      onConfirmFix(conferenceId);
    })
    .catch(() => {
      // on cancel
    });
}

async function onConfirmFix(conferenceId) {
  showLoadingToast("修复中...");
  await fixConferenceAPI(conferenceId);
  showToast("修复成功");
  props.onRefresh();
}

function onHandleBindCustomer() {
  showBindCustomerDialog.value = false;
  props.onRefresh();
}

const cp_loading = computed({
  set(v) {
    emits("update:loading", v);
  },

  get() {
    return props.loading;
  },
});

const cp_refreshing = computed({
  set(v) {
    emits("update:refreshing", v);
  },

  get() {
    return props.refreshing;
  },
});

const cp_finished = computed({
  set(v) {
    emits("update:finished", v);
  },

  get() {
    return props.finished;
  },
});
</script>

<style lang="less" scoped>
// /deep/ .van-list {
//   background: red;
// }
</style>
